<script setup lang="ts">
import { Menu as IconMenu, Message, Setting } from "@element-plus/icons-vue";
import { onBeforeUnmount, onMounted, onUpdated, ref } from "vue";
const rootHeight = ref("100%");
const menuList = ref([
  {
    name: "1",
    code: "1",
    child: [
      { childName: "1-1", childCode: "1-1" },
      { childName: "1-2", childCode: "1-2" },
      { childName: "1-3", childCode: "1-3" },
      { childName: "1-4", childCode: "1-4" },
      { childName: "1-5", childCode: "1-5" },
      { childName: "1-6", childCode: "1-6" },
      { childName: "1-7", childCode: "1-7" },
      { childName: "1-8", childCode: "1-8" },
      { childName: "1-9", childCode: "1-9" },
      { childName: "1-10", childCode: "1-10" },
    ],
  },
  {
    name: "2",
    code: "2",
    child: [
      { childName: "2-1", childCode: "2-1" },
      { childName: "2-2", childCode: "2-2" },
      { childName: "2-3", childCode: "2-3" },
      { childName: "2-4", childCode: "2-4" },
      { childName: "2-5", childCode: "2-5" },
      { childName: "2-6", childCode: "2-6" },
      { childName: "2-7", childCode: "2-7" },
      { childName: "2-8", childCode: "2-8" },
      { childName: "2-9", childCode: "2-9" },
      { childName: "2-10", childCode: "2-10" },
    ],
  },
  {
    name: "3",
    code: "3",
    child: [
      { childName: "3-1", childCode: "3-1" },
      { childName: "3-2", childCode: "3-2" },
      { childName: "3-3", childCode: "3-3" },
      { childName: "3-4", childCode: "3-4" },
      { childName: "3-5", childCode: "3-5" },
      { childName: "3-6", childCode: "3-6" },
      { childName: "3-7", childCode: "3-7" },
      { childName: "3-8", childCode: "3-8" },
      { childName: "3-9", childCode: "3-9" },
      { childName: "3-10", childCode: "3-10" },
      { childName: "3-11", childCode: "3-11" },
      { childName: "3-12", childCode: "3-12" },
      { childName: "3-13", childCode: "3-13" },
      { childName: "3-14", childCode: "3-14" },
      { childName: "3-15", childCode: "3-15" },
      { childName: "3-16", childCode: "3-16" },
      { childName: "3-17", childCode: "3-17" },
      { childName: "3-18", childCode: "3-18" },
      { childName: "3-19", childCode: "3-19" },
    ],
  },
]);
//--------------------------------------------------------------------------------------
// 标记当前选中的数据位置
const currentMenuPosition = ref({
  parentCode: "",
  childCode: "",
});
//--------------------------------------------------------------------------------------
// 赋，初始值
function initSel() {
  if (menuList.value.length > 0) {
    currentMenuPosition.value.parentCode = menuList.value[0]?.code ?? "";
    if (menuList.value[0].child.length > 0) {
      currentMenuPosition.value.childCode =
        menuList.value[0].child[0]?.childCode ?? "";
    } else {
      currentMenuPosition.value.childCode = "";
    }
  } else {
    currentMenuPosition.value.parentCode = "";
    currentMenuPosition.value.childCode = "";
  }
  console.log(
    "<-initSel->" +
      currentMenuPosition.value.parentCode +
      "<-->" +
      currentMenuPosition.value.childCode +
      "<-->"
  );
}
//--------------------------------------------------------------------------------------
function parentClick(code: string) {
  for (var i = 0; i < menuList.value.length; i++) {
    if (code == menuList.value[i].code) {
      currentMenuPosition.value.parentCode = code;
      if (menuList.value[i].child.length > 0) {
        currentMenuPosition.value.childCode =
          menuList.value[i].child[0]?.childCode ?? "";
      }
    }
  }
  console.log(
    "<-parentClick->" +
      currentMenuPosition.value.parentCode +
      "<-->" +
      currentMenuPosition.value.childCode +
      "<-->"
  );
}
function childClick(code: string) {
  for (var i = 0; i < menuList.value.length; i++) {
    if (currentMenuPosition.value.parentCode == menuList.value[i].code) {
      for (var j = 0; j < menuList.value[i].child.length; j++) {
        if (menuList.value[i].child[j].childCode == code) {
          currentMenuPosition.value.childCode = code;
          break;
        }
      }
    }
  }
  console.log(
    "<-childClick->" +
      currentMenuPosition.value.parentCode +
      "<-->" +
      currentMenuPosition.value.childCode +
      "<-->"
  );
}
//--------------------------------------------------------------------------------------
onMounted(() => {
  const height = document.body.offsetHeight;
  rootHeight.value = height + "px";
  window.addEventListener("resize", resizeListener);
  initSel();
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", resizeListener);
});
onUpdated(() => {
  const height = document.body.offsetHeight;
  rootHeight.value = height + "px";
  console.log("宽度[onUpdated]----" + rootHeight.value);
});
function resizeListener() {
  const height = document.body.offsetHeight;
  rootHeight.value = height + "px";
  console.log("宽度[resizeListener]----" + rootHeight.value);
}
</script>
<template>
  <div class="style-root" :style="{ height: rootHeight }">
    <el-scrollbar>
      <div v-for="(item, index) in menuList" :key="item.code">
        <!-- ********* -->
        <!-- 菜单（选中） -->
        <div
          class="style-parent-menu-sel"
          @click="parentClick(item.code)"
          v-if="currentMenuPosition.parentCode == item.code"
        >
          {{ item.name }}
        </div>
        <!-- ********* -->
        <!-- 菜单（未选中） -->
        <div
          class="style-parent-menu"
          @click="parentClick(item.code)"
          v-if="currentMenuPosition.parentCode != item.code"
        >
          {{ item.name }}
        </div>
        <!-- ********* -->
        <div v-for="(itemSub, subIndex) in item.child" :key="itemSub.childCode">
          <!-- ********* -->
          <!-- 子菜单（选中） -->
          <div
            class="style-child-menu-sel"
            @click="childClick(itemSub.childCode)"
            v-if="
              currentMenuPosition.parentCode == item.code &&
              currentMenuPosition.childCode == itemSub.childCode
            "
          >
            {{ itemSub.childName }}
          </div>
          <!-- ********* -->
          <!-- 子菜单（选中） -->
          <div
            class="style-child-menu"
            @click="childClick(itemSub.childCode)"
            v-if="
              currentMenuPosition.parentCode == item.code &&
              currentMenuPosition.childCode != itemSub.childCode
            "
          >
            {{ itemSub.childName }}
          </div>
          <!-- ********* -->
          <!-- 分割线 -->
          <div
            class="style-div-menu"
            v-if="
              subIndex < item.child.length - 1 &&
              currentMenuPosition.childCode == itemSub.childCode
            "
          ></div>
          <!-- ********* -->
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>
<style scoped>
.style-root {
  width: 210px;
  height: 100%;
  background-color: antiquewhite;
  display: flex;
  flex-direction: column;
  justify-content: start;
}
.style-parent-menu {
  width: 100%;
  height: 48px;
  background-color: azure;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: start;
  padding-left: 16px;
  padding-right: 16px;
}
.style-parent-menu-sel {
  width: 100%;
  height: 48px;
  background-color: coral;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: start;
  padding-left: 16px;
  padding-right: 16px;
}
.style-child-menu {
  width: 100%;
  height: 48px;
  background-color: lightblue;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: start;
  padding-left: 16px;
  padding-right: 16px;
}
.style-child-menu-sel {
  width: 100%;
  height: 48px;
  background-color: lawngreen;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: start;
  padding-left: 16px;
  padding-right: 16px;
}
.style-div-menu {
  width: 100%;
  height: 1px;
  background-color: #efefef;
}
</style>
